<template>
  <div class="book-container">
    <!-- 表格：使用过滤后的表格数据 filterTableData -->
    <el-table :data="filterTableData" style="width: 100%; margin-bottom: 20px">
      <!-- 表格列：prop 绑定后端返回的实际字段名（确保与接口返回字段一致） -->
      <el-table-column label="书名" prop="title" />
      <el-table-column label="作者" prop="author" />
      <el-table-column label="年份" prop="publishedYear" />
      <el-table-column align="right">
        <!-- 表头搜索框：v-model 绑定 search 响应式变量 -->
        <template #header>
          <el-input v-model="search" size="small" placeholder="搜索书名或作者" />
        </template>
        <!-- 操作按钮：通过 scope.row 获取当前行数据 -->
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            Edit
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件：参数已正确绑定脚本中的响应式数据 -->
    <div>
      <!-- 单页隐藏开关：v-model 绑定 value 变量 -->
      <!-- <el-switch v-model="value" /> -->
      <hr class="my-4" />
      <el-pagination :hide-on-single-page="value" :total="total" :current-page="currentPage" :page-size="pageSize"
        layout="prev, pager, next" @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const records = ref([]) // 后端返回的原始数据
const total = ref(0) // 总数据条数（用于分页）
const currentPage = ref(1) // 当前页码
const pageSize = ref(5) // 每页条数
const search = ref('') // 搜索关键词
const value = ref(false) // 控制分页是否单页隐藏

// 获取路由实例
const router = useRouter()

// 过滤后的表格数据（基于后端返回的 books）
const filterTableData = computed(() => {
  if (!search.value) {
    return records.value
  }
  const keyword = search.value.toLowerCase()
  return records.value.filter(item => {
    // 搜索书名或作者（根据实际字段名调整）
    return item.title.toLowerCase().includes(keyword) ||
      item.author.toLowerCase().includes(keyword)
  })
})

// 从后端获取数据（支持分页）
const fetchBooks = () => {
  // 调用后端分页接口（假设接口支持 page 和 pageSize 参数）
  axios.get('http://localhost:8081/books/findPage', {
    params: {
      page: currentPage.value,
      pageSize: pageSize.value
    }
  })
    .then(response => {
      // 假设后端返回格式：{ data: [...], total: 总条数 }
      records.value = response.data.records // 分页数据
      total.value = response.data.total // 总条数
    })
    .catch(error => {
      console.error("获取数据失败：", error)
      ElMessage.error('加载数据失败，请稍后重试')
    })
}

// 分页切换事件
const handlePageChange = (page) => {
  currentPage.value = page // 更新当前页
  fetchBooks() // 重新加载对应页数据
}

// 编辑操作
const handleEdit = (row) => {
  console.log('编辑数据：', row)
}

// 删除操作
const handleDelete = (row) => {
  console.log('删除数据：', row)
}

// 组件挂载时加载数据（相当于Vue2的created）
onMounted(() => {
  fetchBooks()
})
</script>

<style scoped>
.book-container {
  padding: 20px;
}
</style>